<template>
    <div>
        
		<el-form :model="form" :rules="rules" label-position="right" ref="form" label-width="160px">
		
		   <!--下拉框选择示例-->
            <el-form-item label="菜单级别：" prop="level">
                <el-col :span="15">
                    <el-radio v-model="form.level" label="0" @change="parentMenuChanges">一级菜单</el-radio>
                    <el-radio v-model="form.level" label="1" @change="parentMenuChanges">子级菜单</el-radio>
                </el-col>
            </el-form-item>
            <el-form-item label="父菜单：" prop="father" v-show="form.level != 0">
                <el-col :span="8">
                    <el-cascader
                            placeholder="选择父菜单"
                            v-model="form.father"
                            :options="temporaryFatherData"
                            change-on-select
                            :props="props">
                    </el-cascader>
                </el-col>
            </el-form-item>
		   
		   <!--单行录入示例-->
		   <el-form-item label="菜单名称：" prop="name">
		       <el-col :span="8">
		           <el-input v-model="form.name" placeholder="请输入菜单名称"></el-input>
		       </el-col>
		   </el-form-item>
		   <el-form-item label="跳转地址：" prop="urls">
		       <el-col :span="8">
		           <el-input v-model="form.urls" placeholder="请输入跳转地址"></el-input>
		       </el-col>
		   </el-form-item>
		   
		   <!--提交按钮-->
		   <el-form-item>
			   <el-button type="primary" @click="submitForm('form')">提交</el-button>
			   <el-button @click="resetForm">重置</el-button>
		   </el-form-item>
   
		</el-form>
    </div>
</template>

<script>
    import { mapState,mapMutations } from 'vuex'
    export default {
        //数据源
        data(){
            return {
            	//验证规则
				rules : {
				   name : [
					   { required: true, message: '请输入菜单名称', trigger: 'blur' }
				   ],
				   urls : [
					   { required: true, message: '请输入跳转地址', trigger: 'blur' }
				   ],
				},
                props: {
                    value: 'value'
                },
            }
        },
        //初始化函数
        mounted() {
            this.initData();
        },
        //计算属性
        computed: {
            // ...mapState({ })
            ...mapState({
				form : state => state.AddBottomMenuModule.form,
				temporaryFatherData : state => state.AddBottomMenuModule.temporaryFatherData
			})
        },
        //组件方法
        methods: {
            // ...mapMutations()
            //数据获取
            initData(){
              
                //获取菜单列表信息
                this.$myLoading.startLoading()
                this.$http.getHttp(this.$API.searchBottomMenu + "/skip/0/limit/1000", rs => {
                    this.$myLoading.endLoading()
                    console.log(rs.data)
                    this.$store.commit('AddBottomMenuModule/updateTemporaryFatherData',this.$common.arrayBottomMenu(rs.data))
                });
            },
            //添加按钮
			submitForm(form){
				
				this.$refs[form].validate((valid) => {

					if (valid) {
						
						if(this.form.level == 0){
							this.form.father = ['0'];
						}
						
						var fidStr = this.form.father.join(',');

					    var params = {
							   cbm_fid : this.form.father[this.form.father.length-1],
							   cbm_fid_path : fidStr + ",",
							   cbm_name   : this.form.name,
							   cbm_url   : this.form.urls,
						}
					    
						   this.$myLoading.startLoading()
						   this.$http.postHttp(
							   this.$API.addBottomMenu,
							   params,
							   rs => {
									this.$myLoading.endLoading();
									this.$myPop.SuccessMessage();
									this.resetFormAll();
            						this.initData();
							   }
						   )
						
				
					}

				})
				
			},
			//重置按钮
			resetForm(){
				this.$store.commit('AddBottomMenuModule/clearForm');
			},
			//重置全部
			resetFormAll(){
				this.$store.commit('AddBottomMenuModule/resetFormAll');
			},

            //开启三级联动 选择父级菜单
            parentMenuChanges(){
            	console.log(this.form.level)
            	if(this.form.level == 0){
            		
            	}else{
            		
            	}
			},

        }
    }
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS';
</style>